<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="../Scripts/Settings.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS/Settings.css" />
<title>Settings</title>
</head>

<body>
	<div id="settings-container">
		<div id="row">

			<div id="navigation-pane" style="left: 0px;">
				<h1 id="settings-title">Settings</h1>
				<ul id="navbar">
					<li id="microBreakSettings" class="navigation-pane-item"
						pageID="microBreakSettingsPage" tabindex="0">Micro Break</li>
					<li id="macroBreakSettings" class="navigation-pane-item"
						pageID="macroBreakSettingsPage" tabindex="1">Macro Break</li>
					<li id="otherOptionsSettings" class="navigation-pane-item"
						pageID="otherOptionsSettingsPage" tabindex="2">Other Options</li>
				</ul>
			</div>

			<div id="settings-pane">
				<div id="settings-pane-block">
					<div id="microBreakSettingsPage" class="page">
						<h1 i18n-content="browserPage">Micro Break Settings</h1>

						<section id="timerSettingsSection">
							<h3 i18n-content="microTimerSettingsSectionHeading">Timer</h3>
							<div>
								<span id="microBreakDurationText">Interval Duration
									in seconds</span> <input id="microBreakDurationRange" spanID="microBreakDurationRangeValue" type="range" min="5" max="120" value="20"
									step="5"></input>
									<span id="microBreakDurationRangeValue">20</span>
							</div>
							<div>
								<span id="micro-IntervalFrequencyText">Interval Frequency
									in minutes</span> <input id="microBreakFrequencyRange" spanID="microBreakFrequencyRangeValue" type="range" min="5" max="20" value="10"
									step="1"></input>
									<span id="microBreakFrequencyRangeValue">10</span>
							</div>

							<h3 i18n-content="microAppearanceSettingsSectionHeading">Appearance</h3>
							<div class="checkbox">
								<div>
									<label> <input id="coloredBackgroundEnabled"
										type="checkbox"> <span
										i18n-content="coloredBackgroundEnabled">Display a
											colored background in the notification</span> </label>
								</div>
								<div>
									<label> <input id="flashingBackgroundEnabled"
										type="checkbox"> <span
										i18n-content="flashingBackgroundEnabled">Flash the
											background in the notification</span> </label>
								</div>
							</div>
						</section>

					</div>
					<div id="macroBreakSettingsPage" class="page hidden">
						<h1 i18n-content="browserPage">Macro Break Settings</h1>
					</div>
					<div id="otherOptionsSettingsPage" class="page hidden">
						<h1 i18n-content="browserPage">Other Options</h1>
					</div>
				</div>
			</div>

		</div>
	</div>
</body>

</html>